<template>
   <div class="customer-container">
     <!--Advertisement-->
     <el-carousel :interval="3000" type="card" height="280px">
       <el-carousel-item v-for="advertisement in advertisements" :key="advertisement['id']">
         <div :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(advertisement['image']) + ')' }"
              class="advertisement-image"></div>
       </el-carousel-item>
     </el-carousel>
     <!--Hot store-->
     <div class="hot-store-container">
       <p class="hot-store-title"><i class="el-icon-star-on" style="color: #d2d2d2; margin-right: 10px;"></i>热门商家</p>
       <el-row :gutter="20">
         <el-col :span="6" v-for="hotStore in hotStores" :key="hotStore['id']">
           <el-card shadow="always" class="hot-store-card" v-if="hotStore['opening']">
             <div class="hot-store-card-container" @click="storeClick(hotStore)">
               <div :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(hotStore['storeInformation']['logoImage']) + ')' }" class="hot-store-logo-image"></div>
               <div class="hot-store-details">
                 <p class="hot-store-txt hot-store-name">{{ hotStore['name'] }}</p>
                 <el-rate :value="hotStore['rank']" disabled show-score text-color="#ff9900" score-template="{value}" style="padding: 10px 0" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
                 <p class="hot-store-txt hot-store-other">配送费 {{ hotStore['storeInformation']['deliveryCost'] }} 元</p>
                 <p class="hot-store-txt hot-store-other">配送范围 {{ hotStore['storeInformation']['deliveryArea'] }} 公里</p>
               </div>
             </div>
           </el-card>
           <el-card shadow="always" class="hot-store-card store-card-closing" v-else @click.native="closingStoreClick">
             <div class="hot-store-card-container">
               <div :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(hotStore['storeInformation']['logoImage']) + ')' }" class="hot-store-logo-image"></div>
               <div class="hot-store-details">
                 <p class="hot-store-txt hot-store-name">{{ hotStore['name'] }}</p>
                 <el-rate :value="hotStore['rank']" disabled show-score text-color="#ff9900" score-template="{value}" style="padding: 10px 0" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
                 <p class="hot-store-txt hot-store-other">配送费 {{ hotStore['storeInformation']['deliveryCost'] }} 元</p>
                 <p class="hot-store-txt hot-store-other">配送范围 {{ hotStore['storeInformation']['deliveryArea'] }} 公里</p>
               </div>
             </div>
           </el-card>
         </el-col>
       </el-row>
     </div>
     <!--Normal store-->
     <div class="store-container">
       <p class="hot-store-title"><i class="el-icon-location" style="color: #d2d2d2; margin-right: 10px;"></i>附近商家</p>
       <el-row :gutter="20">
         <el-col :span="4" v-for="store in normalStores" :key="store['id']">
           <el-card shadow="always" class="normal-store-card" :class="{ 'store-card-closing': !store['opening'] }" v-if="store['opening']">
             <div class="normal-store-card-container" @click="storeClick(store)">
               <div :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(store['storeInformation']['logoImage']) + ')' }" class="normal-store-logo-image"></div>
               <div class="normal-store-card-details">
                 <p class="normal-store-txt normal-store-name">{{ store['name'] }}</p>
                 <el-rate :value="store['rank']" disabled text-color="#ff9900" score-template="{value}" style="padding: 7px 0" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
                 <p class="normal-store-txt normal-store-other">配送费 {{ store['storeInformation']['deliveryCost'] }} 元</p>
                 <div class="store-closing" v-if="!store['opening']">商家休息,暂不接单</div>
               </div>
             </div>
           </el-card>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="4" v-for="store in normalStores" :key="store['id']">
           <el-card shadow="always" class="normal-store-card" :class="{ 'store-card-closing': !store['opening'] }" v-if="!store['opening']">
             <div class="normal-store-card-container" @click="closingStoreClick()">
               <div :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(store['storeInformation']['logoImage']) + ')' }" class="normal-store-logo-image"></div>
               <div class="normal-store-card-details">
                 <p class="normal-store-txt normal-store-name">{{ store['name'] }}</p>
                 <el-rate :value="store['rank']" disabled text-color="#ff9900" score-template="{value}" style="padding: 7px 0" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
                 <p class="normal-store-txt normal-store-other">配送费 {{ store['storeInformation']['deliveryCost'] }} 元</p>
                 <div class="store-closing" v-if="!store['opening']">商家休息,暂不接单</div>
               </div>
             </div>
           </el-card>
         </el-col>
       </el-row>
     </div>
     <!--Pagination-->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPageIndex"
         :page-sizes="[6, 12, 24, 36]"
         :page-size="currentMaxResults"
         layout="total, sizes, prev, pager, next, jumper"
         :total="currentTotal">
       </el-pagination>
     </div>
   </div>
</template>

<script>
export default {
  name: 'CustomerContainer',
  data () {
    return {
      that: this,
      advertisements: [],
      hotStores: [],
      normalStores: [],
      currentPageIndex: 1,
      currentMaxResults: 12,
      currentTotal: 0
    }
  },
  watch: {
    '$route': ['initializeAdvertisement', 'initializeHotStore', 'initializeStore']
  },
  created () {
    this.initializeAdvertisement()
    this.initializeHotStore()
    this.initializeStore()
  },
  methods: {
    initializeAdvertisement () {
      this.$customerAPI.advertisement().then((params) => {
        this.advertisements = params.data
      })
    },
    initializeHotStore () {
      this.$customerAPI.store_hot(4).then((params) => {
        this.hotStores = params.data
      })
    },
    initializeStore () {
      this.$customerAPI.stores(this.currentPageIndex, this.currentMaxResults).then((params) => {
        this.normalStores = params.data['items']
        this.currentTotal = params.data['itemTotal']
      })
    },
    handleSizeChange (val) {
      this.currentMaxResults = val
      this.initializeStore()
    },
    handleCurrentChange (val) {
      this.currentPageIndex = val
      this.initializeStore()
    },
    storeClick (store) {
      this.$router.push('/customer/store/' + store['id'])
    },
    closingStoreClick () {
      this.$message('商家休息中，请勿打扰')
    }
  }
}
</script>

<style scoped>
  .customer-container {
    padding: 0 150px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 280px;
    margin: 0;
  }
  .advertisement-image {
    width: 100%;
    height: 280px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .hot-store-container {
    padding: 30px 0;
  }
  .hot-store-title {
    font-size: 22px;
    letter-spacing: 5px;
    color: #515151;
  }
  .hot-store-card {
    border-top: 3px solid #f3b274;
    cursor: pointer;
    position: relative;
    top: 0;
  }
  .hot-store-card:hover, .normal-store-card:hover {
    top: -6px;
  }
  .hot-store-card-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .hot-store-logo-image {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
  }
  .hot-store-details {
    width: 100%;
    padding: 0 22px;
  }
  .hot-store-txt, .normal-store-txt {
    margin: 0;
    padding: 0;
    color: #515151;
    letter-spacing: 1px;
  }
  .hot-store-name {
    font-size: 18px;
    line-height: 30px;
  }
  .hot-store-other {
    font-size: 14px;
    line-height: 22px;
    color: #a2a2a2;
  }
  .normal-store-card {
    cursor: pointer;
    position: relative;
    top: 0;
    margin-bottom: 36px;
  }
  .normal-store-card-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .normal-store-card-details {
    width: 100%;
    padding-left: 15px;
  }
  .normal-store-logo-image {
    width: 55px;
    height: 55px;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
  }
  .normal-store-name {
    font-size: 14px;
    line-height: 28px;
  }
  .normal-store-other {
    font-size: 11px;
    line-height: 22px;
  }
  .pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
  }
  .store-closing {
    font-size: 11px;
    color: white;
    padding: 2px 6px;
    background-color: #a2a2a2;
    border-radius: 4px;
    margin-top: 6px;
    text-align: center;
  }
  .store-card-closing {
    opacity: 0.6;
  }
</style>
